<template>
  <div class="register">
    <el-card class="box-card">
      <span>用户-注册</span>
      <avue-form
        class="register_from"
        ref="form"
        :option="option"
        v-model="obj"
        @submit="register"
      >
      </avue-form>
      <!-- 自定义按钮 -->
      <el-button type="primary" size="small" plain @click="$refs.form.submit()"
        >注册</el-button
      >
      <span style="margin-left: 3%; text-align: center; font-size: 12px">
        <router-link to="/login">登录</router-link>
      </span>
    </el-card>
    <div class="record">
      <a href="https://beian.miit.gov.cn/" target="_blank">备案号： 蜀ICP备19022468号-2</a>
    </div>
  </div>
</template>

<script>
import { register } from "@/services/login";
export default {
  name: "Register",
  data() {
    return {
      obj: {
        registerType:1,
      },
      option: {
        width: 400,
        time: 60,
        submitBtn: false,
        emptyBtn: false,
        menuPosition: "100px",
        column: [
          {
            row: true,
            maxlength: 32,
            showWordLimit: true,
            span: 20,
            prop: "username",
            label: "用户名",
            autocomplete: "off",
            rules: [
              { required: true, message: "请输入用户名", trigger: "blur" },
            ],
          },
          {
            row: true,
            span: 20,
            prop: "password",
            label: "密码",
            type: "password",
            showPassword: true,
            autocomplete: "off",
            rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
          },
          {
            span: 20,
            prop: "verifyPassword",
            label: "确认密码",
            type: "password",
            showPassword: true,
            autocomplete: "off",
            rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    register(form, done) {
      register(this.obj)
        .then((res) => {
          if (res.data) {
            this.$router.push("/login");
          } else {
            done(form);
          }
        })
        .catch((error) => {
          console.error(error);
          done(form);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.register_from {
  margin-top: 2%;
  /* margin-bottom: 1%; */
}
.box-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
  overflow: visible;
  width: 40%;
  height: 40%;
  margin-top: 15%;
  text-align: center;
}
.register {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../assets/images/login-2.webp");
  background-size: cover;
}
.record {
  text-align: right;
  margin-bottom: 1%;
  margin-right: 1%;
  a {
    text-decoration: none;
  }
}
</style>